<template>
  <div align="left">
    <h3 style="font-weight: bold">产品详情页</h3>
    <br /><br />
    <el-descriptions title="新型产品PS2024" column="4">
      <el-descriptions-item label="创建人：">张三</el-descriptions-item>
      <el-descriptions-item label="创建时间：">{{
        createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="最后修改人：">张三</el-descriptions-item>
      <el-descriptions-item label="修改时间：" @click="updateModifyTime">{{
        modifyTime
      }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button>编辑</el-button>
        <el-button>删除</el-button>
        <el-button>禁用</el-button>
        <el-button>启用</el-button>
        <el-button @click="handleSale">销售</el-button>
        <el-button @click="handleInt">入库</el-button>
        <el-button @click="handleOut">出库</el-button>
        <el-button>出入流水</el-button>
        <el-button>批次查询</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <br />

    <el-descriptions title="基本信息" :column="2" border>
      <el-descriptions-item
        label="产品编号："
        label-align="right"
        align="center"
        label-class-name="my-label"
        class-name="my-content"
        width="150px"
      >
        <el-tag size="small">{{
          tableData.Product_Code
        }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item
        label="产品名称："
        label-align="right"
        align="center"
        ><el-tag size="small">{{
          tableData.Product_Name
        }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item
        label="规格型号："
        label-align="right"
        align="center"
        ><el-tag size="small">{{
          tableData.Model_Number
        }}</el-tag></el-descriptions-item
      >
      <el-descriptions-item label="品牌：" label-align="right" align="center">
        <el-tag size="small">{{ tableData.Brand }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="单位：" label-align="right" align="center"
        ><el-tag size="small">{{ tableData.UnitName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="产品分类："
        label-align="right"
        align="center"
        ><el-tag size="small">{{ tableData.TypeName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="产品属性："
        label-align="right"
        align="center"
        ><el-tag size="small">{{ tableData.AttName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="销售单价："
        label-align="right"
        align="center"
        ><el-tag size="small" style="color: red">{{
          tableData.Unit_Price
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="最小库存数："
        label-align="right"
        align="center"
        ><el-tag size="small">{{ tableData.Minimum_Stock_Quantity }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="最大库存数："
        label-align="right"
        align="center"
        ><el-tag size="small">{{ tableData.Maximum_Stock_Quantity }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="产品有效期："
        label-align="right"
        align="center"
        ><el-tag size="small">{{
          tableData.Product_Expiry_Date.substr(0, 10)
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label="报警天数："
        label-align="right"
        align="center"
        ><el-tag size="small">{{ tableData.Alert_Days }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="状态：" label-align="right" align="center"
        ><el-tag
          size="small"
          v-if="tableData.Status == 1"
          style="color: green; font-weight: bold"
          >启用</el-tag
        >
        <el-tag size="small" v-else style="color: red; font-weight: bold"
          >停用</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item label="备注：" label-align="right" align="center"
        ><el-tag size="small">{{ tableData.Remarks }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="图片：" label-align="right" align="center"
        ><el-tag size="small" style="height: 100px">
          <img
            :src="'http://localhost:5055/PIC/' + tableData.Product_Image"
            style="width: 100px; height: 100%"
        /></el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <br />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const createTime = ref(""); // 创建时间
const modifyTime = ref(""); // 修改时间

const tableData = ref({
  Product_Code: "",
  Product_Name: "",
  Model_Number: "",
  Brand: "",
  UnitName: "",
  TypeName: "",
  AttName: "",
  Unit_Price: "",
  Minimum_Stock_Quantity: "",
  Maximum_Stock_Quantity: "",
  Product_Expiry_Date: "",
  Alert_Days: "",
  Status: "",
  Remarks: "",
  Product_Image: "",
});

const getTime = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const createTimeVal = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  createTime.value = createTimeVal; // 设置创建时间
  return createTimeVal;
};

const getTime1 = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  modifyTime.value = currentTime; // 设置修改时间
  return currentTime;
};

const updateModifyTime = () => {
  getTime1(); // 更新修改时间
};

const handleInt = () => {
  router.push("/UserList/outtab");
};

const handleOut = () => {
  router.push("/UserList/outshow");
};

const handleSale = () => {
  router.push("/UserList/sale");
};

const getProductList = () => {
  const product_Id = route.query.product_Id; // 获取主键ID
  axios
    .get(`Product/GetStockInSel?product_Id=${product_Id}`)
    .then((res) => {
      if (res.data.Code === 200) {
        tableData.value = res.data.Data;
      }
    })
    .catch((error) => {
      console.error("获取数据失败：", error);
    });
};

onMounted(() => {
  getProductList();
  getTime(); // 初始化时间
  setInterval(() => {
    getTime1(); // 每秒更新一次修改时间
  }, 1000);
});
</script>

<style scoped>
.el-tag {
  font-size: 12pt;
}
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table td {
  border: 1px solid #e0e0e0;
  padding: 10px;
}

.custom-table td:first-child {
  font-weight: bold;
  background-color: #f5f5f5;
}
</style>